<template>
<div style="height:100%">
  <div class="buttonarea">

   
  </div>
 
<div >
  <el-table
      :data="orders"
      style="width: 100%;"
      row-key="id"
      border
       >
      <!-- <el-table-column
      type="selection"
      width="55">
    </el-table-column> -->
  <el-table-column
     label="应付款日期"
    width="180">
         <template slot-scope="scope">{{getNowFormatDate(scope.row.createTime)}}</template>

  </el-table-column>
    <el-table-column
     label="实际付款日期"
    width="180">
             <template slot-scope="scope">{{getNowFormatDate(scope.row.paymentTime)}}</template>

  </el-table-column>
  <el-table-column
    prop="payment"
    label="付款金额">
  </el-table-column>
  <el-table-column
   
    label="状态">
     <template slot-scope="scope">{{scope.row.status==0?(scope.row.selftraveltag==1?'增员':'')+'未付款':(scope.row.selftraveltag==1?'增员':'')+'已付款'}}</template>
  </el-table-column>
    <el-table-column
    label="参保人数"
    prop="lzxcount">
    </el-table-column>
    <el-table-column
    fixed="right"
    label="操作"
    width="250">
    <template slot-scope="scope">
    <!-- <el-button slot="reference" type="text" size="small">查看</el-button> -->
    <el-button type="text" size="small" @click="dialogTableVisible = true;members=[];memberpage=1;getmembersoforder(scope.row.id)">查看参保人员</el-button>
    </template>
  </el-table-column>
  </el-table>
  <div style="display:block;text-align:center">
 <el-pagination
      @current-change="handleCurrentChangea"
      :current-page.sync="page"
      :page-size="size"
  background
  layout="prev, pager, next"
  :total="total">
 </el-pagination>
</div>

 <el-dialog title="参保人员列表" :visible.sync="dialogTableVisible">
  <el-table :data="members">
    <el-table-column   label="参保日期" width="150"><template slot-scope="scope">{{getNowFormatDate(scope.row.created)}}</template></el-table-column>
    <el-table-column property="username" label="姓名" width="200"></el-table-column>
    <el-table-column property="creditcard" label="身份证号"></el-table-column>
  </el-table>
  <div class="block" style='text-align: center'>
  <el-pagination
      @current-change="handleCurrentChangeb"
      :current-page.sync="memberpage"
      :page-size="10"
  background
  layout="prev, pager, next"
  :total="membertotal">
 </el-pagination>
 </div>
</el-dialog>



  </div>

    <el-dialog
  title="订单列表"
  :visible.sync="orderVisible"
  width="50%"
   >
  <el-table :data="orders">
          
    <el-table-column width="200"   label="应付款日期"><template slot-scope="scope">{{getNowFormatDate(scope.row.consignTime)}}</template></el-table-column>
    <el-table-column width="100" property="payment" label="付款金额"></el-table-column>
    <el-table-column width="100"   label="付款状态">   <template slot-scope="scope">{{scope.row.status==0?'未付款':'已付款'}}</template></el-table-column>
    <el-table-column  label="操作" width="100">
        <template slot-scope="scope">
            <!-- <el-button @click="handleClick(scope.row)" type="text" size="small">确认已付款</el-button> -->
      <el-button type="text" v-if="scope.row.status==0" size="small" @click="showqrcode(scope.row.id)">付款二维码</el-button>  

          </template>
    
    </el-table-column>
  </el-table>
          <span slot="footer" class="dialog-footer">
    <el-button @click="orderVisible = false">取 消</el-button>
   

    <el-button type="primary" @click="orderVisible=false">关闭</el-button>
     
  </span>
</el-dialog>



  </div>
</template>

<script>
import { payorder,getpolicysbycustomerid,getorders,getmembersoforder } from '@/api/policy'

export default {
  name: 'hisbill',
  components: { },
    computed: {
  },
   data() {
      return {
        memberpage:1,
        membertotal:0,
        page:1,
        size:10,
        total:0,
        codeurl:'',
        shoukuanVisible:false,
        dialogTableVisible:false,
        orderVisible:false,
        orders: [ ],
        comtype:'',
        fkstatevalue:'',
        input3: '',
        select: '',
        policys: [ ],
        members:[],
 


      }},
  components:{


  },
  activated(){
    // this.getpossiblemembers(0);

  },
  mounted(){
//  this.getpolicys();
 this.getorders(this.$route.query.id)
  },
  methods:{
    toadd(id){
      this.$router.push("addcustomerlead?id="+id)
    },
       getNowFormatDate(dt) {
         if(!dt)
         return dt;
        var date = new Date(dt);
        var seperator1 = "-";
        var year = date.getFullYear();
        var month = date.getMonth() + 1;
        var strDate = date.getDate();
        if (month >= 1 && month <= 9) {
            month = "0" + month;
        }
        if (strDate >= 0 && strDate <= 9) {
            strDate = "0" + strDate;
        }
        var currentdate = year + seperator1 + month + seperator1 + strDate;
        return currentdate;
    },
        handleCurrentChange(){
          this.getpolicys();
        },
          handleCurrentChangea(){
          this.getorders(this.$route.query.id);
        },
          handleCurrentChangeb(id){
          this.getmembersoforder(id);
        },
        showqrcode(orderid){

          // 
         this.pays(orderid,'https://ynujly.hxxdib.com',2);
           //payorder,getqrcode
        },
        shoukuan(policyid){
            this.orders=[];
          this.orderVisible = true;
          this.getorders(policyid);

        },
        getpolicys(tag){
          this.$loadingshow();
       getpolicysbycustomerid({ page:this.page,size:this.size }).then(res => {
              this.$loadingclose();
       if (res.code == 200) {
          this.policys=res.result.list;
           this.total=res.result.total;
        } 
        else{
          this.$toast(res.message)
        }
      });
        


      },
      getorders(policyid){


           this.$loadingshow();
       getorders({ page:this.page,size:this.size, policyid:policyid,status:1 }).then(res => {
              this.$loadingclose();
       if (res.code == 200) {
                    this.orders=res.result.list;
                    this.total=res.result.total;

        } 
        else{
          this.$toast(res.message)
        }
      });
        



       

      },

     getmembersoforder(id){
          this.$loadingshow();
       getmembersoforder({ page:this.memberpage,size:10,orderid:id }).then(res => {
              this.$loadingclose();
       if (res.code == 200) {
          this.members=res.result.list;
           this.membertotal=res.result.total;
        } 
        else{
          this.$toast(res.message)
        }
      });
        


      },



   pays(orderid,redirecturl,paymenttype)
{


        this.$loadingshow();
       payorder({  orderid:orderid,type:paymenttype,redirect:redirecturl}).then(res => {
              this.$loadingclose();
       if (res.code == 200) {
           this.codeurl=res.result.codeurl;
            this.shoukuanVisible = true;

        } 
        else{
          this.$toast(res.message)
        }
      });
        
 
}      
  }
}
</script>

<style lang="scss" scoped>
.buttonarea{
  width:90%;
  // height: 50px;
}
.btn{
  position: relative;
    /* left: 73%; */
    float: right;
    right: 9px;
    margin-top: 6px;
}
.block{
      text-align: center;
      margin-top:10px;
}

.documentation-container {
  // margin: 50px;
  .document-btn {
    float: left;
    margin-left: 50px;
    display: block;
    cursor: pointer;
    background: black;
    color: white;
    height: 60px;
    width: 200px;
    line-height: 60px;
    font-size: 20px;
    text-align: center;
  }
}
   .popstyle{
        width: 100%;
        height: 30%;
    }
    .userfile{
    width: 90px;
    height: 30px;
    background: cornflowerblue;
    font-size: 14px;
    color: #fff;
    line-height: 30px;
    border-radius: 10px;
    text-align: center;
    margin: 0 auto;
    margin-top: 20px;
}
/deep/  .el-input--suffix .el-input__inner{
  width:140px;
}
/deep/ .el-form-item{
  width: 20%;
}
</style>
